<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户搜索</title>
    <style type="text/css">
        .content {
            width: 643px;
            margin: 100px auto;
            text-align: center;
        }

        input[type='text'] {
            width: 530px;
            height: 40px;
            font-size: 14px;
        }

        input[type='button'] {
            width: 100px;
            height: 46px;
            background: #38f;
            border: 0;
            color: #fff;
            font-size: 15px
        }

        .show {
            position: absolute;
            width: 535px;
            height: 100px;
            border: 1px solid #999;
            border-top: 0;
            display: none;
        }
    </style>
</head>
<body>
<form autocomplete="off">
    <div class="content">
        <img src="img/logo.jpg">
        <br/><br/>
        <input type="text" id="username">
        <input type="button" value="搜索一下">
        <!--用于显示联想的数据-->
        <div id="show" class="show">

        </div>
    </div>
</form>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>

    $("#username").blur(function(){
        let val = this.value;
        let showDiv=$("#show");
        //子元素效果使用委派实现动态效果
        //鼠标移入效果
        showDiv.delegate("div","mouseover",function () {
            this.style.backgroundColor="yellow";
        });
        //鼠标移出效果

        showDiv.delegate("div","mouseout",function () {
            this.style.backgroundColor="white";
        });
        //点击过后隐藏列表框
        showDiv.delegate("div","click",function () {
            //将列表框中的数据插入到搜索框
            let divtext=this.innerHTML;
            $("#username").val(divtext);
            //隐藏列表框
            showDiv.hide();
        })
        if (val){
            $.get("userServlet",{keyword:val},function(data){
                //data是服务器响应回来的数据
                //在此处解析数据，进行页面局部更新
                //需要判断输入框中是否有数据
                if (data!=null&&data.length!=0){
                    showDiv.show();
                    //清空之前的数据
                    showDiv.html("");
                    //循环遍历将姓名填到div列表中
                    $.each(data,function () {
                        //使用append()追加
                        showDiv.append("<div>"+this.name+"</div>")
                    })
                }else {
                    //data没有数据时隐藏列表框
                    showDiv.hide();
                }
            },"json");
        }else {
            showDiv.hide();
        }
    });
</script>

</html>